<template>
	<view class="contain margin-right-xs margin-top margin-left-xs">
		<view class="flex justify-between">
			<view class="text-gray">
				<image class="hot-img" :src="data?.cover" mode="aspectFill"></image>
			</view>
		</view>
		<view class="hot-t1">
			<text>{{data?.name}}</text>
		</view>
		<view class="">
			<image class="cu-avatar round" src="/src/static/logo.png" mode=""></image>
			<text class="aut-t">作者名</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import type { RecipeType } from '@/model/recipe';

defineProps<{
	data:RecipeType
}>()
</script>

<style>
.contain{
	/* border: 1upx solid #999; */
	border-radius: 10upx;
	flex-shrink: 0;
	width: 300upx;
}
.hot-img{
	width: 332upx;
	height: 404upx;
	border-radius: 10upx;
}
.hot-t1{
	font-size: 28upx;
	font-weight: 500upx;
	color: #000000;
}
.aut-t{
	font-size: 20upx;
	color: #9C9EAF;
}
.cu-avatar{
	width: 40upx;
	height: 40upx;
}
</style>